<template>
  <div class="protectionquery-data">
    <el-card>
      <div slot="header">
        <tools-btn
          :toolsData="toolsData"
          @addData="addData"
          @refresh="refresh"
          @search="search"
          @fieldSet="fieldSet"
          @hasOperation="hasOperation"
        />
      </div>
      <table-list
        id="tableExcel"
        :table="table"
        ref="tableList"
        @handleEdit="handleEdit"
        @handleSee="handleSee"
      >
       <template
          slot-scope="props"
          slot="caseState"
        >
          <span :style="{'color':props.obj.row.caseState== 0 ?'red': props.obj.row.caseState === 1 ? '#428bca' : props.obj.row.caseState === 2 ?
          '#009789':props.obj.row.caseState === 3 ? '#ffb900':props.obj.row.caseState === 4 ? '#808080':props.obj.row.caseState === 5 ? '#1ce6e4':props.obj.row.caseState === 6 ?'#ff5622':'0480a3'}"
            v-text="props.obj.row.caseState === 0 ? '已派发' : props.obj.row.caseState === 1 ? '处理中' : props.obj.row.caseState === 2 ? 
            '案卷完成归档':props.obj.row.caseState === 3 ? '撤销':props.obj.row.caseState === 4 ? '驳回':props.obj.row.caseState === 5 ?
            '案卷完成上报镇街（局）':props.obj.row.caseState === 6 ?'案卷完成上报管理员':'新建案卷'"
          />
        </template>
      </table-list>
      <pagination
        :page="page"
        @pageSizeChange="pageSizeChange"
        @pageCurrentChange="pageCurrentChange"
      />
    </el-card>
    <el-dialog
      :title="editDialog.title"
      v-if="editDialog.visible"
      :visible.sync="editDialog.visible"
      @close="closeDialog('editDialog')"
      width="60%"
      top="10vh"
    >
      <el-form
        :model="editDialog.data"
        ref="editDialog.data"
        label-width="110px"
      >
        <fieldset>
          <legend>修改环保案卷基本信息</legend>
          <el-row>
            <el-col :span="12">
              <el-form-item label="案卷状态">
                <el-select v-model="FileStatus" placeholder="请选择案卷站点类型" size="mini" style="width:100%;" @change="casestate">
                  <el-option
                    v-for="item in caseStates"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>
        <fieldset>
          <legend>修改环保案卷处理情况</legend>
          <el-row>
            <el-col :span="12">
              <el-form-item label="处理人">
                <el-select v-model="editDialog.data.handlePeople" placeholder="请选择处理人" size="mini" style="width:100%;" @change="handlepeople">
                  <el-option
                    v-for="(item, index) in handlePeoples"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :data-moble="item.moble">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理人电话">
                <el-input v-model="editDialog.data.phone" size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="最后修改人">
                <el-input v-model="editDialog.data.reportname" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最后修改时间">
                <el-date-picker
                  v-model="editDialog.data.uploadtime"
                  type="datetime"
                  size="mini"
                  style="width:100%;"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="处理环保现场描述">
                <el-input v-model="editDialog.data.pollutedesc" size="mini" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="处理环保案卷图片">
                <el-upload
                  class="upload-demo"
                  v-model="editDialog.data.file"
                  action="http://61.181.255.77:17322/bc_hb/uploadDocument"
                  multiple
                  :on-success="fileSuccessImg"
                  :limit="3"
                  id="upload"
                  ref="upload"
                  :data="{'position':centerMap}"
                  >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理环保案卷视频">
                <el-upload
                  class="upload-demo"
                  v-model="editDialog.data.file"
                  action="http://61.181.255.77:17322/bc_hb/fileUpload"
                  multiple
                  :on-success="fileSuccessVideo"
                  :limit="3"
                  id="upload"
                  ref="upload"
                  >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>
      </el-form>
      <span slot="footer">
        <el-button
          size="small"
          plain
          @click="closeDialog('editDialog')"
        >取 消</el-button>
        <el-popover
          class="edit-dialog-popover"
          placement="top"
          v-model="editDialog.submitVisible"
        >
          <p style="text-align: center; margin-top: 0; color:#409eff">
            确定提交吗？
          </p>
          <div style="text-align: center">
            <el-button
              size="mini"
              @click="editDialog.submitVisible = false"
              v-text="'取 消'"
              plain
            />
            <el-button
              type="primary"
              size="mini"
              v-text="'确 定'"
              @click="handleSubmit"
              plain
              id="btn"
            />
          </div>
          <el-button
            slot="reference"
            type="primary"
            size="small"
            v-text="'提 交'"
            plain
          />
        </el-popover>
      </span>
    </el-dialog>
    <el-dialog
      :title="seeDialog.title"
      v-if="seeDialog.visible"
      :visible.sync="seeDialog.visible"
      @close="closeseeDialog('seeDialog')"
      width="60%"
      top="10vh"
    >
      <el-form
        :model="seeDialog.data"
        ref="seeDialog.data"
        label-width="90px"
      >
        <fieldset>
          <legend>环保案卷基本信息</legend>
          <el-row>
            <el-col :span="12">
              <el-form-item label="镇街">
                <el-input v-model="seeDialog.data.twonStreet" size="mini" :disabled="true"/>
              </el-form-item>
            </el-col>
             <el-col :span="12">
             <el-form-item label="环保状态">
              <el-input v-model="caseId" size="mini" :disabled="true"/>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="举报对象">
                <el-input v-model="seeDialog.data.reportobject" size="mini" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="举报类型">
                <el-input v-model="seeDialog.data.pollutetype" size="mini" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="举报地址">
                <el-input v-model="seeDialog.data.reportaddr" size="mini" :disabled="true" type="textarea"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="举报描述">
                <el-input v-model="seeDialog.data.pollutedesc" size="mini" :disabled="true" type="textarea"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="举报图片">
                <el-button type="primary" size="mini" @click="recordImage">查看图片</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>
        <fieldset>
          <legend>处理环保案卷信息</legend>
          <el-row>
            <el-col :span="12">
              <el-form-item label="处理人">
                <el-input v-model="seeDialog.data.handlePeople" size="mini" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理人电话">
                <el-input v-model="seeDialog.data.phone" size="mini" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="最后修改人">
                <el-input v-model="seeDialog.data.reportname" size="mini" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最后修改时间">
                <el-input v-model="seeDialog.data.uploadtime" size="mini" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="处理案卷图片">
                <el-button type="primary" size="mini" @click="recordHandleImage">查看图片</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理案卷视频">
                <el-button type="primary" size="mini" @click="recordHandleVideo">查看视频</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>
      </el-form>
    </el-dialog>
    <el-dialog
      :title="recordImageDialog.title"
      v-if="recordImageDialog.visible"
      :visible.sync="recordImageDialog.visible"
      @close="closerecordImageDialog('recordImageDialog')"
      width="20%"
    >
      <img :src="src" width="100%"/>
    </el-dialog>
    <el-dialog
      :title="recordHandleImageDialog.title"
      v-if="recordHandleImageDialog.visible"
      :visible.sync="recordHandleImageDialog.visible"
      @close="closerecordHandleImageDialog('recordHandleImageDialog')"
      width="20%"
    >
      <img :src="urlHandleImage" width="100%"/>
    </el-dialog>
    <el-dialog
      :title="recordHandleVideoDialog.title"
      v-if="recordHandleVideoDialog.visible"
      :visible.sync="recordHandleVideoDialog.visible"
      @close="closerecordHandleVideoDialog('recordHandleVideoDialog')"
      width="20%"
    >
       <video :src="urlHandleVideo" controls="controls" width="100%">
        </video>
    </el-dialog>
  </div>
</template>
<script>
import ToolsBtn from "../../components/Tools/ToolsBtn";
import TableList from "../../components/Table/TableList";
import TableProps from "../../utils/tableProps.js";
import Pagination from "../../components/Pagination/pagination";
import PageProps from "../../utils/pageProps.js";
import Hprotection from "./Hprotectionquery.js";
export default {
  name: 'ProtectionQuery',
  components: {
    ToolsBtn,
    TableList,
    Pagination
  },
  data () {
    return {
      table: TableProps,
      page: PageProps,
      toolsData: {
        title: "环保案卷查询",
        datatimefier: false,
        datatime: '',
        identifier: false,
        content: "请输入设备号",
        query: '',
        oBtnShow: [
          { btn0: false }, // 新增按钮
          { btn1: false }, // 刷新按钮
          { btn2: false }, // 搜索按钮
          { btn3: false }, // 设置按钮
          { btn4: false } // 导出Excel按钮
        ]
      },
      userlevel: JSON.parse(sessionStorage.getItem("token")),
      editDialog: {
        title: "编辑",
        visible: false,
        submitVisible: false,
        data: null
      },
      caseStates: [],
      FileStatus: '',
      handlePeoples: [],
      handlePeople: '',
      centerMap: '',
      Image: [],
      Video: '',
      statecase: '',
      handle: '',
      seeDialog: {
        title: "编辑",
        visible: false,
        submitVisible: false,
        data: null
      },
      caseId: '',
      recordImageDialog: {
        title: "查看图片",
        visible: false,
        submitVisible: false,
        data: null,
      },
      src: '',
      urlHandleImage: '',
      recordHandleImageDialog: {
        title: "查看处理图片",
        visible: false,
        submitVisible: false,
        data: null,
      },
      urlHandleVideo: '',
      recordHandleVideoDialog: {
        title: "查看处理视频",
        visible: false,
        submitVisible: false,
        data: null,
      }
    }
  },
  created () {
    this.table.tHead = Hprotection;
    this.table.identifier = true;
    this.table.hasOperation = true;
    this.table.hasExpand = false;
    this.table.operation.data = [
      {
        id: 1,
        label: "编 辑",
        Fun: "handleEdit",
        btnType: "text",
        plain: false,
        size: "mini",
        className: "handleEdit"
      },
      {
        id: 2,
        label: "查看",
        Fun: "handleSee",
        btnType: "text",
        plain: false,
        size: "mini",
        className: "handleSee"
      }
    ];
    this.getList(1,10)
    this.filestatus()
  },
  methods: {
    getList(page, size){
      this.table.data = [];
      this.table.loading = true;
      const params = {
        page,
        size,
        userid: this.userlevel.userId,
        userlevel: this.userlevel.userlevel
      }
      this.$api.PROTECTION.PROTECTIONQUERY(params)
      .then(res => {
        this.table.data = res.data;
        this.table.loading = false;
        this.page.total = res.count;
      })
      .catch(() => {
        this.$message({
          showClose: true,
          message: '暂无数据',
          type: 'error'
        });
      })
    },
    // 编辑
    handleEdit(index, row){
      this.editDialog.visible = true;
      this.editDialog.submitVisible = true;
      this.editDialog.data = row
      if(row.caseState === 0){
        this.FileStatus = '已派发'
      } else if(row.caseState === 1){
        this.FileStatus = '处理中'
      } else if(row.caseState === 2){
        this.FileStatus = '案卷完成归档'
      } else if(row.caseState === 3){
        this.FileStatus = '撤销'
      } else if(row.caseState === 4){
        this.FileStatus = '驳回'
      } else if(row.caseState === 5){
        this.FileStatus = '案卷完成上报镇街（局）'
      } else if(row.caseState === 6){
        this.FileStatus = '案卷完成上报管理员'
      } else if(row.caseState === 7){
        this.FileStatus = '新建案卷'
      }
      this.$api.LAWMONITORING.STREETTWON()
       .then(res => {
         for(var i=0;i<res.data.length;i++){
            if(row.twonStreet === res.data[i].township_name){
              const params1 = {
                townshipid: res.data[i].id
              }
              this.$api.LAWMONITORING.DEALINGPEOPLE(params1)
              .then(res => {
                var arr = [];
                for(var i=0;i<res.data.length;i++){
                  arr[i] = {};
                  arr[i].value = res.data[i].id;
                  arr[i].label = res.data[i].turename;
                  arr[i].moble = res.data[i].moble;
                }
                this.handlePeoples = arr;
              })
              .catch(() => {
                  this.$message({
                    showClose: true,
                    message: '暂无数据',
                    type: 'error'
                  });
              })
            }
         }
       })
    },
    handleSubmit(){
      function _p(s) {
        return s < 10 ? "0" + s : s;
      }
      var uploadtime = ''
      if(this.editDialog.data.uploadtime === null){
        uploadtime = this.editDialog.data.uploadtime
      } else {
        const inform = new Date(this.editDialog.data.uploadtime);
        uploadtime = `${inform.getFullYear()}-${_p(inform.getMonth() + 1)}-${_p(inform.getDate())} ${_p(inform.getHours())}:${_p(inform.getMinutes())}:${_p(inform.getSeconds())}`;
      }
      const params = {
        id: this.editDialog.data.id,
        caseState: this.statecase,
        handlePeople: this.handle,
        phone: this.editDialog.data.phone,
        reportname: this.editDialog.data.reportname,
        uploadtime: uploadtime,
        pollutedesc: this.editDialog.data.pollutedesc,
        handleImage: this.Image === ''? this.editDialog.data.imgurl:this.Image.join(),
        handleVideo: this.Video,
      }
      this.$api.PROTECTION.PROTECTIONEDIT(params)
      .then(() => {
        this.getList(1,10);
        this.$message({
          showClose: true,
          message: '修改成功',
          type: 'success'
        });
      })
      .catch(() => {
        this.$message({
          showClose: true,
          message: '修改失败',
          type: 'error'
        });
      })
      this.editDialog.visible = false;
    },
    // 查看
    handleSee(index,row){
      this.seeDialog.visible = true;
      this.seeDialog.title = `${row.reportobject}查看`;
      this.seeDialog.data = row;
      this.src = row.imgurl.split(',')[0]
      this.urlHandleImage = row.handleImage.split(',')[0]
      this.urlHandleVideo = row.handleVideo
      if(row.caseState === 0){
        this.caseId = '已派发'
      } else if(row.caseState === 1){
        this.caseId = '处理中'
      } else if(row.caseState === 2){
        this.caseId = '案卷完成归档'
      } else if(row.caseState === 3){
        this.caseId = '撤销'
      } else if(row.caseState === 4){
        this.caseId = '驳回'
      } else if(row.caseState === 5){
        this.caseId = '案卷完成上报镇街（局）'
      } else if(row.caseState === 6){
        this.caseId = '案卷完成上报管理员'
      } else if(row.caseState === 7){
        this.caseId = '新建案卷'
      }
    },
    recordImage(){
      this.recordImageDialog.visible = true;
    },
    recordHandleImage(){
      this.recordHandleImageDialog.visible = true;
    },
    recordHandleVideo(){
      this.recordHandleVideoDialog.visible = true;
    },
    //案卷状态
    filestatus(){
      const params = {
        level: this.userlevel.userlevel
      }
      this.$api.LAWMONITORING.INQUIRYSTATUS(params)
      .then(res => {
        var arr = []
        for(var i=0;i<res.data.length;i++){
          arr[i] = {};
          arr[i].value = res.data[i].state;
          arr[i].label = res.data[i].statename;
        }
        this.caseStates = arr;
      })
    },
    casestate(val){
      this.statecase = val
    },
    handlepeople(val){
      this.handle = val
      for(var i=0;i<this.handlePeoples.length;i++){
        if(val === this.handlePeoples[i].value){
          this.editDialog.data.phone = this.handlePeoples[i].moble
        }
      }
    },
    //图片上传成功
    fileSuccessImg(res){
      this.Image.push(res)
      // this.Image = res
    },
    // 视频上传成功
    fileSuccessVideo(res){
      this.Video = res
    },
    handler ({BMap}) {
      var current=''
      var geolocation = new BMap.Geolocation();
      geolocation.enableSDKLocation();
      geolocation.getCurrentPosition(function (r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
              const p_x = r.point.lng
              const p_y = r.point.lat
              const geoc = new BMap.Geocoder();
              const pt = new BMap.Point(p_x, p_y);
              geoc.getLocation(pt, function (rs) {
                const addComp = rs.addressComponents;
                current = addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber
              })
          }
          else {
              alert('failed' + this.getStatus());
          }
          setTimeout(function(){
            this.centerMap = current
          },100)
          
      }, { enableHighAccuracy: true })
    },
    // 关闭模态框
    closeDialog(name){
      if(name === "editDialog"){
        this[name].visible = false;
        this[name].submitVisible = false
      }
      this[name].visible = false
    },
    closeseeDialog(name){
      if(name === "seeDialog"){
        this[name].visible = false;
        this[name].submitVisible = false
      }
      this[name].visible = false
    },
    closerecordImageDialog(name){
      if(name === "recordImageDialog"){
        this[name].visible = false;
        this[name].submitVisible = false
      }
      this[name].visible = false
    },
    closerecordHandleImageDialog(name){
      if(name === "recordHandleImageDialog"){
        this[name].visible = false;
        this[name].submitVisible = false
      }
      this[name].visible = false
    },
    closerecordHandleVideoDialog(name){
      if(name === "recordHandleVideoDialog"){
        this[name].visible = false;
        this[name].submitVisible = false
      }
      this[name].visible = false
    },
    // 分页大小
    pageSizeChange(size) {
      // console.log(`每页 ${size} 条`);
      const tableDataLength = this.table.data.length;
      this.page.pageSize = size;
      if (tableDataLength < this.page.pageSize) {
        this.getList(1, size);
      } else {
        const pageNo = this.page.currentPage;
        this.getList(pageNo, size);
      }
    },
    // 翻页
    pageCurrentChange(pageNo) {
      // console.log(`当前页: ${pageNo}`);
      this.page.currentPage = pageNo;
      const size = this.page.pageSize;
      this.getList(pageNo, size);
    },
    // 新增数据
    addData() {
      // console.log("新 增");
      this.handleEdit();
    },
    // 列表数据刷新
    refresh() {
      // console.log("刷 新");
      this.getList(1,50)
    },
    // 搜索
    search() {
      // console.log("搜索");
    },
    // 字段设置
    fieldSet() {
      // console.log("字段设置");
    },
    // 隐藏表格操作列
    hasOperation() {
      // console.log("隐藏表格操作列");
      this.table.hasOperation = !this.table.hasOperation;
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .handleSee{
  color: #66c33a;
}
/deep/.el-dialog__title{
  font-size: 12px;
}
/deep/.el-form-item__label{
  font-size: 12px;
}
fieldset {
  border: 1px solid #acc4dc;
  padding: 0 10px;
}
fieldset legend {
  padding: 0 10px;
  font-size: 12px;
  color: #409eff;
}
.el-form-item{
  margin-bottom: 5px;
}
</style>